<!-- 适配标题栏的内容视图 -->
<template>
	<view class="my-content" :style="{paddingTop: paddingTop + 'px', paddingBottom: paddingBottom}">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name:"my-content",
		props: {
			// 需要自定义需要填充的高度值
			defaultPaddingTop: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				// 标题高度默认为80rpx
				headerHeight: 80,
				// 需要填充的高度
				paddingTop: this.headerHeight,
				paddingBottom: 0
			};
		},
		mounted() {
			const { safeArea } = uni.getSystemInfoSync()
			// 获取手机状态栏的高度
			const statusBarHeight = safeArea.top
      // console.log('safeArea: ', safeArea)
			// 获取手机底部导航栏的高度
			const navigationBarHeight = safeArea.bottom
			// 整个内容视图需要往上填充的高度值
			const paddingTop = statusBarHeight + uni.upx2px(this.headerHeight)
			this.paddingTop = paddingTop + uni.upx2px(this.defaultPaddingTop)
			/* console.log(paddingTop, uni.upx2px(80)); */
			// #ifdef APP-IOS
			 this.paddingBottom = navigationBarHeight
			// #endif
		}
	}
</script>

<style lang="scss">
.my-content {
  height: 100%;
  display: flex;
  flex-direction: column;
	box-sizing: border-box;
}
</style>